<template>
  <div>
    <TopSwiper :tops='tops'></TopSwiper>
    <Card v-for='(book,index) in books'
          :key='index'
          :book='book'
          :books='books'>{{book.title}}</Card>
    <div v-if='!more'
         class='bookBottom'>没有更多的数据</div>
  </div>
</template>
 

<script>
import { get } from '@/utils'
import Card from '@/components/Card'
import TopSwiper from '@/components/TopSwiper'
export default {
  data () {
    return {
      books: [],
      page: 0,
      more: true,
      tops: []
    }
  },
  created () {
    wx.startPullDownRefresh()
  },
  methods: {
    async getList (intial) {
      if (intial) {
        this.page = 0
        this.more = true
      }
      wx.showNavigationBarLoading()
      const books = await get('/weapp/bookList', {
        page: this.page
      })
      this.books = this.books.concat(books.list)
      if (books.list.length < 10 && this.page > 0) {
        this.more = false
      }
      wx.stopPullDownRefresh()
      wx.hideNavigationBarLoading()
    },
    async getTop () {
      const tops = await get('/weapp/top')
      this.tops = tops.list
      console.log(this.tops)
    }
  },
  onPullDownRefresh () {
    this.getList(true)
    this.getTop()
  },
  onReachBottom () {
    if (!this.more) {
      return false
    }
    this.page++
    this.getList()
  },
  mounted () {
    this.getList(true)
    this.getTop()
  },
  components: {
    Card,
    TopSwiper
  }
}
</script>

<style>
.bookBottom {
  text-align: center;
  font-size: 15px;
}
</style>
